<template>
	<div class="income-submit-confirm" v-show="false" v-if="detailData">
		<p class="title">分期明细</p>
		<ul class="submit-table">
			<li class="submit-table-item" v-for="item in detailData">
				<div class="submit-table-cont">
					<span class="submit-table-left">第{{item.instalmentNo}}期：</span>
					<span class="submit-table-right">￥{{item.amount}}</span>
				</div>
				<div class="submit-table-cont">
					<p class="zhuangtai"><i class="iconfont" :class="[YoN ? 'icon-wancheng-copy':'icon-iconfontwenhao1']"></i>已完成 缴费日期：{{$moment(item.createDate).format('YYYY-MM-DD')}}</p>
				</div>
			</li>
		</ul>
	</div>
</template>
<script>
	export default {
		name: "",
		props: {
			value: {
				type: Boolean,
				default: false
			},
			detailData: {
				type: Array
			}
		},
		data() {
			return {
				visible: this.value,
				layIndex: null,
				YoN: true
			};
		},
		methods: {
			close() {
				this.visible = false;
				this.$emit('input', false);
			}
		},
		watch: {
			value(val) {
				this.visible = val;
			},
			visible(val) {
				if(val === false) {
					layer.close(this.layIndex);
				} else {
					this.$nextTick(() => {
						let that = this;
						this.layIndex = layer.open({
							type: 1,
							shadeClose: true,
							title: "",
							skin: "layui-layer-rim", //加上边框
							area: ["60%", "500px"], //宽高
							content: $(this.$el),
							end: function() {
								that.close();
							}
						});
					});
				}
			}
		}
	};
</script>

<style scoped>
	.icon-wancheng-copy {
		margin-right: 6px;
		color: #ff8b23;
	}
	
	.icon-iconfontwenhao1 {
		margin-right: 6px;
		color: #ff4420;
	}
	
	.zhuangtai {
		text-align: right;
		padding-right: 20px;
		color: #575757;
	}
	
	.add-btn {
		height: 40px;
		padding: 0 33px;
		float: right;
		background: url("/static/img/nav-bg.png");
		background-size: 100% 100%;
		border: 0;
	}
	
	.select-btn {
		height: 40px;
		padding: 0 33px;
		margin-right: 20px;
		float: right;
		background: url("/static/img/hui-btnBG.png");
		background-size: 100% 100%;
		border: 0;
		color: #000;
	}
	
	.totalNum {
		color: #ff3333;
	}
	
	.title {
		width: 100%;
		float: left;
		padding: 30px 0;
		color: #575757;
		font-size: 22px;
	}
	
	.submit-table {
		width: 100%;
		float: left;
		border: 1px solid #d9d9d9;
		background: #f1f1f1;
		border-radius: 3px;
	}
	
	.submit-table-item {
		width: 100%;
		float: left;
		padding: 18px 0;
		border-bottom: 1px solid #d9d9d9;
	}
	
	.submit-table-item:last-child {
		border: 0;
	}
	
	.submit-table-cont {
		width: 50%;
		float: left;
	}
	
	.submit-table-left {
		width: 20%;
		float: left;
		text-align: right;
		padding-right: 5%;
		color: #9d9d9d;
	}
	
	.submit-table-right {
		width: 75%;
		float: left;
		color: #575757;
	}
	
	.waiting {
		color: #ff4c4c;
	}
</style>